<template>
  <!-- 找回密码（验证身份）-->
  <div>
    <p></p>
    <div class="i-top">
      <div class="wrap">
        <div class="logo">
          <a href="https://www.liepin.com/" title="猎聘网"></a>
        </div>
      </div>
    </div>
    <div class="main">
      <h1>找回密码</h1>
      <div class="passport-progress">
        <el-steps :active="active" finish-status="success" simple>
          <el-step title="验证身份" icon="el-icon-edit"></el-step>
          <el-step title="设置新密码" icon="el-icon-upload"></el-step>
          <el-step title="完成" icon="el-icon-picture"></el-step>
        </el-steps>
      </div>
      <div class="content">
        <el-form ref="form" :model="form" label-width="80px">
          <div class="th">
            <th>我的身份是：</th>
          </div>
          <div class="radio">
            <el-radio v-model="form.radio" label="1">求职者/猎头</el-radio>
            <el-radio v-model="form.radio" label="2">企业HR</el-radio>
          </div>
          <div class="login-name">
            <div class="name">
              <th>登录手机号/邮箱：</th>
            </div>
            <div class="input">
              <el-input
                v-model="form.phone"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="switch-btn">
              <a href="">非中国大陆用户>></a>
            </div>
          </div>
          <div class="next">
            <el-button type="primary" :plain="true" @click="onSubmit"
              >下一步</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
    <div class="footer">
      <div class="copyright">
        <div class="copy-side">
          <i class="icon-16 icon-bottom-phone"></i>服务热线：400-6212-266
        </div>
        <div class="copy-main">
          <p>
            <a
              href="http://www.liepin.com/about/introduction.shtml"
              target="blank"
              >猎聘简介 |</a
            >
            <a href="http://www.liepin.com/inshr/index.shtml" target="blank"
              >加入猎聘 |</a
            >
            <a
              href="http://www.liepin.com/about/innovation.shtml"
              target="blank"
              >创新优势 |</a
            >
            <a href="http://www.liepin.com/user/agreement.shtml" target="blank"
              >用户协议 |</a
            >
            <a
              href="https://lpt.liepin.com/pdfview/displayagreement?type=014"
              target="blank"
              >隐私条款 |</a
            >
            <a
              href="http://www.liepin.com/about/mediareports.shtml"
              target="blank"
              >媒体报道 |</a
            >
            <a href="http://www.liepin.com/about/about_us.shtml" target="blank"
              >联系我们 |</a
            >
            <a href="http://www.liepin.com/sitemap.shtml" target="blank"
              >网站地图 |</a
            >
            <a href="http://www.liepin.com/cooperation.shtml" target="blank"
              >网站合作 |</a
            >
            <a
              data-selector="suggest"
              href="http://www.liepin.com/user/feedback/"
              target="blank"
              >意见反馈 |</a
            >
            <a href="http://www.liepin.com/" target="blank">猎聘</a>
          </p>
        </div>
        <div class="copy-footer">
          <p>
            <a
              class="police-record"
              href="http://www.beian.miit.gov.cn"
              target="_blank"
              style="color: rgb(153, 153, 153)"
              >京ICP备09083200号</a
            >
            合字B2-20160007
            <a
              class="police-record"
              href="https://www.liepin.com/about/business-license.shtml"
              target="_blank"
              style="color: rgb(153, 153, 153)"
              >营业执照</a
            >
            <a
              class="police-record"
              href="https://www.liepin.com/about/hrs-license.shtml"
              target="_blank"
              style="color: rgb(153, 153, 153)"
              >人才服务许可证:120116174002号</a
            >
            <a
              class="police-record"
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502035189"
              style="color: rgb(153, 153, 153)"
            >
              <img :src="images[0]" />
              <span>京公网安备 11010502035189号</span>
            </a>
          </p>
          <p class="reserved">
            Copyright © 2006-2020 liepin.com All Rights Reserved
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      form: {
        phone: "",
        radio: "",
      },
      images: [require("../../assets/img/police.png")],
    };
  },
  methods: {
    onSubmit() {
      this.$axios({
        method: "POST",
        url: "api/chk_phone",
        data: {
          Account_num: this.form.phone,
        },
      })
        .then((data) => {
          console.log(data.data);
          if (data.data.login_case == "ok") {
            this.$router.push({
              path: "/phone_password",
              query:{
                phone_num:this.form.phone
              }
            });
          } else {
            this.$message({
              showClose: true,
              message: "手机号/邮箱不存在哦！请仔细检查！",
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
      // if(this.active++ > 2)
      //   this.active = 0,
      // console.log('submit!');
    },
  },
};
</script>

<style scoped>
h1 {
  font-size: 28px;
  line-height: 50px;
  font-weight: normal;
  margin-top: 2%;
  /* margin-left: 24%; */
  font-family: inherit;
  color: inherit;
  text-rendering: optimizelegibility;
}
.th {
  margin-top: 13%;
  margin-left: -10%;
}
.radio {
  margin-top: -5%;
  margin-left: 11%;
}
.name {
  margin-top: 10%;
  margin-left: -21%;
}
.input {
  width: 80%;
  margin-top: -8%;
  margin-left: 25%;
}
.switch-btn a {
  color: #00528c;
  text-decoration: none;
  position: absolute;
  margin-top: -2%;
  margin-left: 15%;
}
.next {
  margin-top: 8%;
  margin-left: -25%;
}
</style>